<template>
  <div>
    <section v-loading="loading" class="cms-body flex" v-if="groupEdition.groupEditionType==4">
      <!-- 树组件 -->
      <cms-tree @change="getChannelId" :hasContent='true' :action="api.contentAllTree"></cms-tree>
      <cms-back></cms-back>
      <div class="cms-content-right">
        <div class="cms-list-header clearfix flex">
          <div class="bread-box cms-left">
            <label style="font-size: 15px;padding-left:10px">中文名:{{groupEdition.chineseName}}</label>
            <label style="font-size: 15px;padding-left:10px">英文名:{{groupEdition.englishName}}</label>
            <label style="font-size: 15px;padding-left:15px">归类:{{groupEdition.typeName}}</label>
          </div>
        </div>
        <div class="cms-list-header flex-between">
          <div class="cms-left channel-group" style="margin-top: 16px;">
            <cms-mange-news :groupEditionCode="groupEdition.groupEditionCode"
                            :groupEditionId="groupEdition.id" @refreshData="goRefreshData()"></cms-mange-news>
          </div>
          <div style="margin-top:16px;flex:auto" class="content-flex-right">
            <cms-input label="标题" v-model="params.title"></cms-input>
            <el-button @click="query">查询</el-button>
          </div>
        </div>
        <el-table :data="tableData" stripe @selection-change="checkIds" v-loading="loading">
          <el-table-column prop="id" label="id" width="60" align="center"></el-table-column>
          <el-table-column prop="title" label="标题" align="left" min-width="200px">
            <div slot-scope="scope"  style="cursor: pointer" @click="cellClick(scope.row)" title="点击标题预览">
              <span class="cms-channel-name" style="color: #999;">[{{scope.row.channelName}}]</span>{{scope.row.title}}
            </div>
          </el-table-column>
          <el-table-column label="所属频道" prop="channelName" align="center"></el-table-column>
          <el-table-column label="推荐轮播排序" prop="isRecommendSlider" align="center" width="150"
                           v-if="groupEdition.groupEditionCode=='isRecommendSlider'">
            <div slot-scope="scope">
              <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.recommendSliderSort"
                               :min="0" :disabled="!$_has('/groupEdition/check')"></el-input-number>
            </div>
          </el-table-column>
          <el-table-column label="推荐级别" prop="isRecommend" align="center" width="150"
                           v-if="groupEdition.groupEditionCode=='dPIsRecommend'||groupEdition.groupEditionCode=='pcIsRecommend'">
            <div slot-scope="scope">
              <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.recommendLevel"
                               :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
            </div>
          </el-table-column>
          <el-table-column label="推荐置顶" prop="topLevel" align="center" width="150"
                           v-if="groupEdition.groupEditionCode=='topLevel'">
            <div slot-scope="scope">
              <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.topLevel"
                               :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
            </div>
          </el-table-column>
          <el-table-column label="焦点" prop="alertsSort" align="center" width="150"
                           v-if="groupEdition.groupEditionCode=='isAlerts'">
            <div slot-scope="scope">
              <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.alertsSort"
                               :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
            </div>
          </el-table-column>
          <el-table-column label="大图新闻位置" prop="bigPosition" align="center" width="150"
                           v-if="groupEdition.groupEditionCode=='isBig'">
            <div slot-scope="scope">
              <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.bigPosition"
                               :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
            </div>
          </el-table-column>
          <el-table-column label="首页头条" prop="indexHot" align="center" width="150"
                           v-if="groupEdition.groupEditionCode=='indexHotComment'||groupEdition.groupEditionCode=='indexHot'">
            <div slot-scope="scope">
              <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.indexHotPosition"
                               :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
            </div>
          </el-table-column>
          <el-table-column label="频道轮播排序" prop="isChannelSlider" align="center" width="150"
                           v-if="groupEdition.groupEditionCode=='isChannelSlider'">
            <div slot-scope="scope">
              <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.channelSliderSort"
                               :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
            </div>
          </el-table-column>
          <el-table-column label="频道置顶" prop="channelTopLevel" align="center" width="150"
                           v-if="groupEdition.groupEditionCode=='channelTopLevel'">
            <div slot-scope="scope">
              <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.channelTopLevel"
                               :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
            </div>
          </el-table-column>
          <el-table-column label="发布时间" prop="releaseDate" align="center"></el-table-column>
          <!--操作 -->
          <el-table-column label="操作" align="center" width="200px">
            <div slot-scope="scope">
              <el-button type="primary" @click="goCancel(api.viewNewsCancelUpdate,scope.row)"
                         v-perms="'/groupEdition/check'">
                下架
              </el-button>
              <el-button type="success" @click="groupEditionNewOpt(api.groupEditionNewComplete,scope.row)"
                         v-perms="'/groupEdition/check'">
                保存排序
              </el-button>
            </div>
          </el-table-column>
        </el-table>
        <!-- 表格底部 -->
        <div class="cms-list-footer" style="padding-bottom:100px;">
          <div class="cms-left"></div>
          <cms-pagination :total="total" @change="getPages"></cms-pagination>
        </div>
        <div style="margin-left: 20px;color: #999;">
          <span>说明：</span>
          <div v-if="groupEdition.groupEditionCode=='isChannelSlider'">
            <p class="fontsizes">1、手動設置該頻道任意新聞進行排序，同一個排序，顯示最新的</p>
            <p class="fontsizes">2、APP頻道輪播和PC輪播顯示一樣的新聞</p>
          </div>
          <div v-else-if="groupEdition.groupEditionCode=='channelTopLevel'">
            <p class="fontsizes">1、列表為該頻道下3篇置頂新聞</p>
            <p class="fontsizes">2、手動選擇該頻道任何新聞，進行排序提交，同一個排序，按時間先後</p>
            <p class="fontsizes">3、置頂的新聞將會在PC首頁分類里優先顯示</p>
          </div>
        </div>
      </div>
    </section>
    <section v-loading="loading" class="cms-body" v-if="groupEdition.groupEditionType!=4">
      <cms-back></cms-back>
      <div class="cms-list-header clearfix flex">
        <div class="bread-box cms-left">
          <label style="font-size: 15px;padding-left:10px">中文名:{{groupEdition.chineseName}}</label>
          <label style="font-size: 15px;padding-left:10px">英文名:{{groupEdition.englishName}}</label>
          <label style="font-size: 15px;padding-left:15px">归类:{{groupEdition.typeName}}</label>
        </div>
      </div>
      <div class="cms-list-header flex-between">
        <div class="cms-left channel-group" style="margin-top: 16px;">
          <cms-mange-news :groupEditionCode="groupEdition.groupEditionCode"
                          :groupEditionId="groupEdition.id" @refreshData="goRefreshData()"></cms-mange-news>
        </div>
        <div style="margin-top:16px;flex:auto" class="content-flex-right">
          <el-select @change="goQuery()" v-model="params.channelId" clearable placeholder="请选择">
            <el-option v-for="item in channelList" :key="item.channelId" :label="item.channelName"
                       :value="item.channelId">
            </el-option>
          </el-select>
          <cms-input label="标题" v-model="params.title"></cms-input>
          <el-button @click="query">查询</el-button>
        </div>
      </div>
      <el-table :data="tableData" stripe @selection-change="checkIds" width="100%" v-loading="loading">
        <el-table-column prop="id" label="id" width="60" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="left" min-width="200px" style="margin-left: 100px">
          <div slot-scope="scope" @click="cellClick(scope.row)" style="cursor: pointer" title="点击标题预览">
            {{scope.row.title}}
          </div>
        </el-table-column>
        <el-table-column label="所属频道" prop="channelName" align="center"></el-table-column>
        <el-table-column label="推荐轮播排序" prop="isRecommendSlider" align="center" width="150"
                         v-if="groupEdition.groupEditionCode=='isRecommendSlider'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.recommendSliderSort"
                             :min="0" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="推荐级别" prop="isRecommend" align="center" width="150"
                         v-if="groupEdition.groupEditionCode=='dPIsRecommend'||groupEdition.groupEditionCode=='pcIsRecommend'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.recommendLevel"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="推荐置顶" prop="topLevel" align="center" width="150"
                         v-if="groupEdition.groupEditionCode=='topLevel'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.topLevel"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="焦点" prop="alertsSort" align="center" width="150"
                         v-if="groupEdition.groupEditionCode=='isAlerts'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.alertsSort"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="大图新闻位置" prop="bigPosition" align="center" width="150"
                         v-if="groupEdition.groupEditionCode=='isBig'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.bigPosition"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="首页头条" prop="indexHot" align="center" width="150"
                         v-if="groupEdition.groupEditionCode=='indexHotComment'||groupEdition.groupEditionCode=='indexHot'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.indexHotPosition"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="频道轮播排序" prop="isChannelSlider" align="center" width="150"
                         v-if="groupEdition.groupEditionCode=='isChannelSlider'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.channelSliderSort"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="频道置顶" prop="channelTopLevel" align="center" width="150"
                         v-if="groupEdition.groupEditionCode=='channelTopLevel'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.channelTopLevel"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="编辑" prop="userName" align="center" width="75">
          <div slot-scope="scope">
            <p style="color: #FFA500" @click="routerLink('/sysUser/pageList','pageList',scope.row.userId,{userType:1})">
              {{scope.row.userName}}</p>
          </div>
        </el-table-column>
        <el-table-column label="责编" prop="checkUserName" align="center" width="75">
          <div slot-scope="scope">
            <p style="color: #FFA500"
               @click="routerLink('/sysUser/pageList','pageList',scope.row.checkUserId,{userType:2})">
              {{scope.row.checkUserName}}</p>
          </div>
        </el-table-column>
        <el-table-column label="发布时间" prop="releaseDate" align="center"></el-table-column>
        <!--操作 -->
        <el-table-column label="操作" align="center" width="200px">
          <div slot-scope="scope">
            <el-button type="primary" @click="goCancel(api.viewNewsCancelUpdate,scope.row)" v-perms="'/groupEdition/check'">
              下架
            </el-button>
            <el-button type="success" @click="groupEditionNewOpt(api.groupEditionNewComplete,scope.row)" v-perms="'/groupEdition/check'">
              保存排序
            </el-button>
          </div>
        </el-table-column>
      </el-table>
      <!-- 表格底部 -->
      <div class="cms-list-footer" style="padding-bottom:100px;">
        <div class="cms-left"></div>
        <cms-pagination :total="total" @change="getPages"></cms-pagination>
      </div>
    </section>
    <div style="margin-left: 20px;color: #999;" v-if="groupEdition.groupEditionType!=4">
      <span>说明：</span>
      <div v-if="groupEdition.groupEditionCode=='isRecommendSlider'">
        <p class="fontsizes">1、列表為目前輪播大圖顯示的新聞</p>
        <p class="fontsizes">2、選擇任意頻道文章（除睇片）外，進行排序提交，同一個排序，按時間先後</p>
        <p class="fontsizes">3、輪播大圖、APP推薦置頂、APP大圖新聞，PC推薦、PC首頁頭條進行了去重設置，已經在當中位置設置了的新聞，將不再參與其他排序選擇</p>
        <p class="fontsizes">4、點擊下架按鈕，不再顯示</p>
      </div>
      <div v-else-if="groupEdition.groupEditionCode=='dPIsRecommend'">
        <p class="fontsizes">1、列表為目前睇片滑動顯示的新聞從“睇片”里進行選擇設置， 進行排序提交，同一個排序，按時間先後
        </p>
        <p class="fontsizes">2、沒設置則顯示該頻道最新視頻</p>
        <p class="fontsizes">3、APP最多顯示5篇，PC最多顯示9篇新聞</p>
      </div>
      <div v-else-if="groupEdition.groupEditionCode=='topLevel'">
        <p class="fontsizes">1、列表為手機端輪播下3篇置頂新聞</p>
        <p class="fontsizes">2、手動選擇任何新聞，進行排序提交，同一個排序，按時間先後</p>
        <p class="fontsizes">3、輪播大圖、APP推薦置頂、APP大圖新聞，PC推薦、PC首頁頭條進行了去重設置， 已經在當中位置設置了的新聞，將不再參與其他排序選擇</p>
      </div>
      <div v-else-if="groupEdition.groupEditionCode=='isAlerts'">
        <p class="fontsizes">1、列表為手機端焦點滾動新聞</p>
        <p class="fontsizes">2、手動選擇任何新聞，進行排序提交，同一個排序，按時間先後</p>
        <p class="fontsizes">3、手動選擇多少篇顯示多少篇新聞，無選擇，則顯示最新5篇新聞</p>
        <p class="fontsizes">4、焦點新聞不進行去重處理</p>
      </div>
      <div v-else-if="groupEdition.groupEditionCode=='isBig'">
        <p class="fontsizes">大图推荐新闻设定顺序后自由插入新闻列表中，举例：</p>
        <p class="fontsizes">1、大图位置设置为1,代表在新闻列表的第1页第1个位置</p>
        <p class="fontsizes">2、大图位置设置为12,代表在新闻列表第2页的第2个位置</p>
        <p class="fontsizes">3、如果未设置大图推荐新闻，则不显示，如有和广告位置冲突，新闻显示在前面</p>
      </div>
      <div v-else-if="groupEdition.groupEditionCode=='indexHotComment'">
        <p class="fontsizes">1、列表為PC右上角1篇新聞（評論）</p>
        <p class="fontsizes">2、沒有設置新聞，將補充評論頻道最新的一篇上去，同一個排序，顯示最新的</p>
        <p class="fontsizes">3、輪播大圖、APP推薦置頂、APP大圖新聞，PC推薦、PC首頁頭條進行了去重設置， 已經在當中位置設置了的新聞，將不再參與其他排序選擇</p>
      </div>
      <div v-else-if="groupEdition.groupEditionCode=='indexHot'">
        <p class="fontsizes">1、列表為PC右上角4篇新聞</p>
        <p class="fontsizes">2、手動選擇任何新聞（除評論）外，進行排序提交，同一個排序，按時間先後</p>
        <p class="fontsizes">3、不夠4篇新聞，將補充資訊頻道最新的上去，超過4條則按時間先後順序</p>
        <p class="fontsizes">4、輪播大圖、APP推薦置頂、APP大圖新聞，PC推薦、PC首頁頭條進行了去重設置， 已經在當中位置設置了的新聞，將不再參與其他排序選擇</p>
      </div>
      <div v-else-if="groupEdition.groupEditionCode=='pcIsRecommend'">
        <p class="fontsizes">1、列表為PC輪播圖下面6篇新聞</p>
        <p class="fontsizes">2、手動設置任何6篇新聞，同一個排序，顯示最新的，不夠6篇的將補充資訊和评论外新聞</p>
        <p class="fontsizes">3、非手動選擇，將顯示資訊和评论外6篇新聞</p>
        <p class="fontsizes">4、輪播大圖、APP推薦置頂、APP大圖新聞，PC推薦、PC首頁頭條進行了去重設置， 已經在當中位置設置了的新聞，將不再參與其他排序選擇</p>
      </div>
    </div>
    <el-dialog title="文章预览" :visible.sync="isShowContent" v-if="isShowContent">
      <content-preview :contentId="previewId"></content-preview>
    </el-dialog>
  </div>
</template>

<script>
  import listMixins from '@/mixins/list'
  import axios from "axios";

  export default {
    mixins: [listMixins],
    data() {
      return {
        params: {//只需要业务参数
          pageNo: 1,
          pageSize: 10,
          groupEditionCode: ''
        },
        isShowContent: false,
        previewId: '',
        channelList: [],
        groupEdition: this.$route.query,
        api: this.$api,
      };
    },
    methods: {
      goQuery() {
        this.getTableData(this.params);
      },
      getChannelList() {
        axios.post(this.$api.getOneLevelChannelList, {}).then(res => {
          if (res.code == '200') {
            this.channelList = res.body;
          }
        })
      },
      batchUpdate(url) { //保存排列循序
        let params = [];
        for (let i in this.checkedList) {
          let param = this.checkedList[i];
          //console.log(param)
          param['keywordId'] = param.id;
          params.push(param)
        }
        params = JSON.stringify(params);
        this.$confirm('是否保存?', '提示', {type: "warning"}).then(mes => {
          this.$http.post(url, {params: params}).then(res => {
            if (res.code == "200") {
              this.successMessage('操作成功');
              this.getTableData(this.params);
            }
          });
        }).catch(error => {
          console.log(error)
        });
      },
      goRefreshData() {
        this.initTableData(this.$api.viewNewsGroupEditionPageList, this.params)
      },
      cellClick(row) {
        this.previewId = row.id;
        this.isShowContent = true;
      },
      goCancel(url, content) {
        let groupEditionCode = this.params.groupEditionCode;
        content['contentId'] = content.id;
        let params = JSON.stringify(content)
        this.$confirm('是否下架?', '提示', {type: "warning"}).then(mes => {
          this.$http.post(url, {params: params, groupEditionCode: groupEditionCode}).then(res => {
            if (res.code == "200") {
              this.successMessage('操作成功');
              this.getTableData(this.params);
            }
          });
        }).catch(error => {
          console.log(error)
        });
      },
      completeEditionNew(url, remark, groupEditionNew) {
        groupEditionNew['contentId'] = groupEditionNew.id;
        this.$confirm('是否保存排序' + remark + '？', '警告', {type: "error"}).then(mes => {
          axios.post(url, {
            optType:"order",
            params: JSON.stringify(groupEditionNew),
            groupEditionCode: this.groupEdition.groupEditionCode,
          }).then(res => {
            console.log(res);
            if (res.code == "200") {
              this.successMessage('操作成功');
              this.initTableData(this.$api.viewNewsGroupEditionPageList, this.params)
            }
          });
        }).catch(error => {
          console.log(error);
        });
      },
      groupEditionNewOpt(url, groupEditionNew) {
        this.completeEditionNew(url, '修改', groupEditionNew);
      },
      getChannelId(data, node) {
        //获取频道树点击
        this.params.channelId = data.id;//传递频道id
        this.getTableData(this.params); //获取内容信息
      },
    },
    created() {
      this.getChannelList();
      this.params.groupEditionCode = this.$route.query.groupEditionCode;
      this.initTableData(this.$api.viewNewsGroupEditionPageList, this.params)
    }
  };
</script>

<style>
  .fontsizes {
    font-size: 13px;
    margin-bottom: 5px;
  }
</style>
